<template>
	<view class="bg">
		<view class="top_nav" @click="onSetUpMajor">
			<view class="top_nav_text">
				<view class="top_nav_text_position">
					{{majorName ? majorName : '题库名称'}}

					<image :src="imageUrls+'/icon/replace.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="header">
			<!-- 轮播图 -->
			<view class="banner">
				<swiper circular indicator-dots="true" autoplay="true" interval="5000" indicator-active-color="#0492A1"
					indicator-color="#E5E5E5" duration="2000" style="width:100%;hiehgt:100%;">
					<swiper-item v-for="(item,index) in bannerList" :key="index" @click="go_bannerInfo(item)">
						<img class='imgswiper' :src="item.pcImage" alt="">
					</swiper-item>
				</swiper>
			</view>
			<!-- 智能组题、历年真题、模拟机考导航 -->
			<view class="flex">
				<view class="zhineng" @click="go_Page_2(routes.aiQuestionGroup)">
					<view class="text"> 智能组题 </view>
					<view class="text2"> 系统组题，模拟练习 </view>
				</view>
				<view class="linina" @click="go_Page_2(routes.lnzt)">
					<view class="text"> 历年甄题 </view>
					<view class="text2"> 精选甄题，名师解析 </view>
				</view>
				<view class="moni" @click="go_Page_2(routes.mokao)">
					<view class="text"> 模拟机考 </view>
					<view class="text2"> 还原模考，知晓薄弱 </view>
				</view>
			</view>
			<!-- 错题、收藏、笔记、统计报告导航 -->
			<view class="nav">
				<view class="nav_item" v-for="(item,index) in nav_list" :key="index" @click="go_page(item.route)">
					<view class="imgbox"> <img class="" :src="item.pic" alt=""> </view>
					<view class="text3"> {{item.name}} </view>
				</view>
			</view>
		</view>

		<view class="list_box">
			<view class="list_nav">
				<view class="list_nav_item"> 题库 </view>
			</view>
			<!-- 章节练习列表end -->
			<view class="" v-if="zjlx_list.length > 0">
				<view class="" v-for="(item,index) in zjlx_list" :key="index">
					<view class="zjlx_dad_list" @tap="get_zjlx_listById(index)">
						<view class="list_title" v-if="item.lastSubject == 1">
							<img class='list-img' src="../../static/image/xiangxia.png" alt="">{{item.templateName}}
						</view>
						<view class="list_title" v-else>
							<img class='list-img' src="../../static/image/dakai.png" alt="">{{item.templateName}}
						</view>
						<view class="list_number">
							<span v-if="item.doSubjectNumber == item.subjectNumber"
								style="color:rgba(1, 145, 160, 1)">{{item.doSubjectNumber}}</span>
							<span v-else-if="item.doSubjectNumber > 0 && item.doSubjectNumber < item.subjectNumber"
								style="color:rgba(149, 162, 163, 1)">{{item.doSubjectNumber}}</span>
							<span v-else>{{item.doSubjectNumber}}</span>
							/
							<span v-if="item.doSubjectNumber == item.subjectNumber"
								style="color:rgba(149, 162, 163, 1)">{{item.subjectNumber}}</span>
							<span v-else>{{item.subjectNumber}}</span>
						</view>
					</view>
					<view :class="item.lastSubject == 1  ? 'content_open' : 'content_close'">
						<view :class="item.lastSubject == 1  ? 'ziJie_open' : 'ziJie_close'"
							v-for="(itemA,indexA) in templateArr" :key="indexA" @click="onParsing(itemA)">
							<view class="ziJie-flex">
								<view class="lock" v-if="loginState == false" @click.native.stop="loginTip(1)">
									<img src="../../static/icon/lock.png" alt="">
								</view>
								<view class="ziJie-flex2">
									<view class="">
										{{indexA<'10'?'0'+(indexA*1+1):indexA*1+1}}
										<text style="opacity: 0;">0</text>
									</view>
									<view class="">
										{{itemA.templateName}}
									</view>
									<view class="answerSheetbox_content_doing" v-if="itemA.lastSubject == 1 ">
										继续做 </view>
								</view>
								<view class="list_numbe2r">
									<span v-if="itemA.doSubjectNumber == itemA.subjectNumber"
										style="color:rgba(149, 162, 163, 1)">{{itemA.doSubjectNumber}}</span>
									<span
										v-else-if="itemA.doSubjectNumber > 0 && itemA.doSubjectNumber < itemA.subjectNumber"
										style="color:rgba(1, 145, 160, 1)">{{itemA.doSubjectNumber}}</span>
									<span v-else>{{itemA.doSubjectNumber}}</span>
									/
									<span v-if="itemA.doSubjectNumber == itemA.subjectNumber"
										style="color:rgba(149, 162, 163, 1)">{{itemA.subjectNumber}}</span>
									<span v-else>{{itemA.subjectNumber}}</span>
								</view>
							</view>
				
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<img src="../../static/icon/question_nodata.png" alt="" class="nodata_tip">
			</view>
		
		
		</view>

		<!-- 登陆弹窗组件 -->
		<view v-show='loginAss' class="back-tankuang">
			<login class="loginw" @guanbi='guanbi' />
		</view>
	</view>
</template>


<script>
	import {
		practiceAgain,
		getMajor
	} from '@/api/professionalChoice.js'
	import {
		bannerList
	} from '@/api/index/banner.js'
	import {
		get_zjlx_list,
		get_zjlx_listById
	} from '@/api/index/zjlx.js'
	import {
		findBySmartList
	} from '@/api/cySubjectSmart.js'
	import {
		getToken,
		setMajorInfo,
		getMajorInfo,
		setlistById,
		getlistById,
		setchapter,
		getchapter,
	} from '@/common/util/index.js'
	import {
		checkLoginState
	} from '@/api/login.js'
	import {
		nextTick
	} from "vue"
	export default {
		data() {
			return {
				imageUrls: getApp().globalData.imaeWd,
				defult_zjlx: true, // zjlx列表默认状态，【只有刚进入小程序时为true】，点击任意章节练习一级列表内容转为false
				loginAss: getApp().globalData.loginAss, // 登录弹窗状态，默认false不显示，true显示
				loginState: false, // 登陆状态【默认false未登录】，检测token存在变为true，loginState为false时章节练习二级列表带【锁】
				majorName: '', // 左上角专业名称
				pageNo: 1,
				bannerList: [], // 轮播列表
				zjlx_list: [], // 章节练习一级列表
				templateArr: [], // 章节练习二级列表
				majorArray: [], // 专业列表
				nav_list: [{ // 我的错题、我的笔记、统计报告、统计报告
						pic: "../../static/xing/cuoti.png",
						name: "我的错题",
						route: "/pagesA/nav/cuoti/cuoti"
					},
					{
						pic: "../../static/xing/biji.png",
						name: "我的笔记",
						route: "/pagesA/nav/biji/biji"
					},
					{
						pic: "../../static/xing/shoucang.png",
						name: "我的收藏",
						route: "/pagesA/nav/shoucang/shoucang"
					},
					{
						pic: "../../static/xing/tongji.png",
						name: "统计报告",
						route: "/pagesA/nav/statisticalReport/statisticalReport"
					},
				],
				routes: { // 智能组题、历年真题、模拟考试
					aiQuestionGroup: '/pagesA/nav/aiQuestionGroup/aiQuestionGroup',
					lnzt: '/pagesA/nav/lnzt/lnzt',
					mokao: '/pagesA/nav/mokao/mokao',
				},
			}
		},
		onLoad(option) {
			// 页面左上角科目名称
			// console.log(getToken())
			console.log(option)
			// this.loginAss =true
			if (getToken()) {
				this.loginState = true
				uni.showTabBar()
			}
			if (!getMajorInfo()) {
				console.log(123)
				this.getAll()
			} else {
				console.log(1)
				this.majorName = getMajorInfo().majorName
				this.get_zjlx_list()
			}
			this.getBannerList()
		},
		methods: {
			// 获取专业科目列表
			getAll() {
				console.log('appid:', uni.getAccountInfoSync().miniProgram.appId);
				let appId = uni.getAccountInfoSync().miniProgram.appId
				getMajor(appId).then((res) => {
					console.log('获取专业：', res);
					this.majorArray = res.result;
					setMajorInfo(res.result[0].wdResourcesMajorList[0])
					this.majorName = res.result[0].wdResourcesMajorList[0].majorName
					this.get_zjlx_list()
				}).catch((err) => {
					console.log(err);
				});
			},
			onParsing(value) {
				if (!getToken()) {
					// 没token
					this.loginTip(1)
				} else {
					checkLoginState().then((res) => {
						// console.log('登陆状态：', res);
						setlistById(value)
						uni.navigateTo({
							url: '/pages/index/answerSheet?sourceType=1'
						})
					}).catch((err) => {
						// 登录失效
						// console.log('err：', err);
						if (err.data.code == 401 && err.data.message == "账号在其他设备登录") {
							this.loginTip(2)
						}
					})
				}
			},
			getBannerList() {
				let appId = uni.getAccountInfoSync().miniProgram.appId
				bannerList(appId).then((res) => {
					console.log('轮播图返回值：', res);
					this.bannerList = res.result
				})
			},
			get_zjlx_list() {
				var appId = uni.getAccountInfoSync().miniProgram.appId
				let reqdata = {
					major_id: getMajorInfo().id,
					appId: appId
				}
				// console.log('章节练习列表获取reqdata：', reqdata);
				get_zjlx_list(reqdata).then((res) => {
					console.log('章节练习一级查询返回值：', res);
					this.zjlx_list = res.result
					this.zjlx_list.forEach((res, index) => {
						res.isAss = false
						if (res.lastSubject == 1) {
							console.log('执行666，：', res);
							this.get_zjlx_listById(index)
						}
					})
				}).catch((err) => {
					console.log('章节列表错误:', err);
				})
			},
			get_zjlx_listById(index) {
				console.log(index, '5555');
				console.log(this.zjlx_list, '5555');
				if (this.zjlx_list[index].lastSubject == 1 && this.defult_zjlx == true) {
					console.log('11111');
					get_zjlx_listById({
						id: this.zjlx_list[index].id,
						templateId: this.zjlx_list[index].templateId,
						appId: uni.getAccountInfoSync().miniProgram.appId
					}).then((res) => {
						console.log('章节练习二级查询：', res);
						this.templateArr = res.result
						this.zjlx_list[index].isAss = !this.zjlx_list[index].isAss
						this.zjlx_list.forEach((itemA, indexA) => {
							itemA.lastSubject = 0
						})
						this.zjlx_list[index].lastSubject = 1
						setchapter(this.zjlx_list[index])
					})
					this.defult_zjlx = false
				} else if (this.zjlx_list[index].lastSubject == 1) {
					console.log('3333');
					this.zjlx_list[index].lastSubject = 0
				} else if (this.zjlx_list[index].lastSubject == 0) {
					console.log('22222');
					get_zjlx_listById({
						id: this.zjlx_list[index].id,
						templateId: this.zjlx_list[index].templateId,
						appId: uni.getAccountInfoSync().miniProgram.appId
					}).then((res) => {
						console.log('章节练习二级查询：', res);
						this.templateArr = res.result
						this.zjlx_list[index].isAss = !this.zjlx_list[index].isAss
						this.zjlx_list.forEach((itemA, indexA) => {
							itemA.lastSubject = 0
						})
						this.zjlx_list[index].lastSubject = 1
						setchapter(this.zjlx_list[index])
					})
				}
				// -----------------------------------------------------------------------------------
				// if (this.dadArr[index].lastSubject == 1) {
				//  console.log('11111');
				//  this.dadArr[index].lastSubject = 0
				// } else if (this.dadArr[index].lastSubject == 0) {
				//  console.log('22222');
				//  this.dadArr.forEach((itemA, indexA) => {
				//   itemA.lastSubject = 0
				//  })
				//  this.dadArr[index].lastSubject = 1
				// }
			},
			go_page(route) {
				if (!getToken()) {
					// 没token
					this.loginTip(1)
				} else {
					checkLoginState().then((res) => {
						// console.log('res：', res);
						uni.navigateTo({
							url: route
						})
					}).catch((err) => {
						// 登录失效
						// console.log('err：', err);
						if (err.data.code == 401 && err.data.message == "账号在其他设备登录") {
							this.loginTip(2)
						}
					})
				}
			},
			go_Page_2(route) {
				uni.navigateTo({
					url: route
				})
			},
			onSetUpMajor() {
				// 前往专业选择页
				uni.reLaunch({
					url: "/pages/setmajor/demo",
				})
			},
			go_bannerInfo(item) {
				// 带参数前往轮播图详情页
				console.log('go_bannerInfo')
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: '/pagesA/nav/bannerInfo/bannerInfo?data=' + encodeURIComponent(data) 
				})
			},
			goMinePage() {
				// 自定义底部导航前往【我的】页
				uni.navigateTo({
					url: '/pages/mine/mine'
				})
			},
			loginTip(type) {
				// 登陆提示
				if (type == 1) {
					// 无token,未登录
					// uni.showToast({
					// 	title: '请先登录',
					// 	icon: 'error',
					// 	duration: 2000
					// })
					this.loginAss = true
					uni.hideTabBar()
					return
				} else {
					// 有token,但token失效
					// uni.showToast({
					// 	title: '登录失效',
					// 	icon: 'error',
					// 	duration: 2000
					// })
					this.loginAss = true
					uni.hideTabBar()
					return
				}
			},
			guanbi(value) {
				this.loginAss = value
			},

		}
	}
</script>

<style lang="scss" scoped>
	.nodata_tip{
		display: block;
		margin: 0 auto;
		width: 600rpx;
		height: 600rpx;
		// position: fixed;
		// top:50%;
		// left:50%;
		// transform: translate(-50%,-50%);
	}
	.zjlx_dad_list {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
	}

	.answerSheetbox_content_doing {
		margin-left: 30rpx;
		height: 35rpx;
		line-height: 35rpx;
		width: 99rpx;
		text-align: center;
		background-image: url('../../static/icon/doing.png');
		background-size: cover;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		white-space: nowrap;
		color: #FFFFFF;
	}

	.ziJie-flex2 {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
	}

	.list_numbe2r {
		font-size: 28rpx;
		font-family: Bahnschrift;
		font-weight: normal;
		color: #95A2A3;
	}

	.ziJie-flex {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.ziJie_open {
		box-sizing: border-box;
		// padding: 0 40rpx;
		padding: 40rpx 0;
		padding-left: 46rpx;
		padding-right: 42rpx;
		// height: 90rpx;

		width: 100%;
		display: flex;
		align-items: center;
		background: #F8F8F8;
		// border-radius: 20rpx;
		transition: all 0.5s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}

	.ziJie_close {
		box-sizing: border-box;
		padding: 0 40rpx;
		height: 0;
		opacity: 0;
		width: 100%;
		display: flex;
		align-items: center;
		background: #F8F8F8;
		border-radius: 20rpx;
		transition: all 0.5s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}

	.flex {
		display: flex;
		margin-bottom: 30rpx;
	}

	.text {
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 15rpx;
		margin-left: 19rpx;
		margin-bottom: 15rpx;
	}

	.text2 {
		font-size: 20rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 19rpx;
	}

	.zhineng {
		width: 217rpx;
		height: 120rpx;
		background: url(../../static/xing/combination.png) no-repeat;
		background-size: 100%;
	}

	.linina {
		width: 217rpx;
		height: 120rpx;
		background: url(../../static/xing/education.png) no-repeat;
		background-size: 100%;
		margin: 0 19rpx;
	}

	.moni {
		width: 217rpx;
		height: 120rpx;
		background: url(../../static/xing/thetest.png) no-repeat;
		background-size: 100%;
	}

	.bg {
		width: 100%;
		height: auto;
		min-height: 100%;
		padding-bottom: 100rpx;
		background-color: #F7F7F7;
		overflow: hidden;
	}

	.imgswiper {
		width: 691rpx;
		// height: 220rpx;
		height: 100%;
	}

	.lock {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		img {
			position: absolute;
			right: -32rpx;
			top:3rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.top_nav {
		position: fixed;
		z-index: 10;
		left: 0;
		top: 0;
		width: 100%;
		background-color: white;
		display: flex;
	}

	.top_nav_title {
		margin-top: 90rpx;
		margin-bottom: 30rpx;
		margin-left: 30rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.top_nav_text {
		margin-top: 95rpx;
		margin-bottom: 30rpx;
		margin-left: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #132B2E;

		.top_nav_text_position {

			display: flex;
			align-items: center;

			image {
				display: inline-block;
				margin-left: 17rpx;
				width: 25rpx;
				height: 25rpx;
			}
		}

	}

	.bottom_nav_box {
		display: flex;
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100vw;
		box-shadow: 0 21rpx 47rpx 4rpx rgba(158, 155, 155, 0.1400);
		border-radius: 10rpx 10rpx 0 0;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		background: #FFFFFF;

		.bottom_nav_box_1 {
			padding-top: 15rpx;
			margin-left: 220rpx;
			color: #0191A0;

			img {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.bottom_nav_box_2 {
			padding-top: 15rpx;
			margin-left: 230rpx;
			color: #4F5C5E;

			img {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.login_div_bg {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background-color: #969696;
	}

	.classify_box {
		padding-top: 40rpx;
	}

	.classify_box_title {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #132B2E;

		img {
			display: inline-block;
			margin-right: 12rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.classify_box_content {
		display: flex;
		flex-wrap: wrap;

		:first-child {
			margin-left: 0 !important;
		}

		:nth-child(5) {
			margin-left: 0 !important;
		}

		:nth-child(9) {
			margin-left: 0 !important;
		}

		.classify_box_content_item {
			margin-top: 25rpx;
			margin-left: 54rpx;
			height: 50rpx;
			width: 130rpx;
			text-align: center;
			line-height: 50rpx;
			background: rgba(246, 246, 246, 0.9900);
			border-radius: 6rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #95A2A3;
		}
	}

	.classify_submit_btn {
		margin-top: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #0191A0;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}




	.header {
		margin-top: 190rpx;
		padding: 0 30rpx 30rpx 30rpx;
		overflow: hidden;
	}

	.banner {
		margin-bottom: 28rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.nav {
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding-top: 13rpx;
		padding-bottom: 27rpx;
	}

	.nav_item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.imgbox {

			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				width: 144rpx;
				height: 144rpx;
			}
		}

		.text3 {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
		}
	}

	.hr {
		height: 16rpx;
		background-color: #eef3f4;
	}

	.list_box {
		height: auto;
		margin: 0 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx 30rpx;

	}

	.list_nav {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4F5C5E;
	}

	.list_nav_item {
		margin: 30rpx 0 0 0rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
	}

	.list_hr {
		height: 6rpx;
		background: #0191A0;
		border-radius: 2rpx;
	}

	.list {
		height: 104rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.list-img {
			display: inline-block;
			margin-right: 15rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}


	.list_title {
		width: 50%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #132B2E;
		display: flex;
		align-items: center;

		img {
			display: inline-block;
			margin-right: 15rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}

	.list_number {
		font-size: 28rpx;
		font-family: Bahnschrift;
		font-weight: normal;
		color: #95A2A3;
	}

	.list_state {
		width: 130rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #95A2A3;
	}


	.active_list_state {
		width: 130rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background: rgba(233, 253, 255, 0.9900);
		border-radius: 6rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0191A0;
	}

	/******************************动态样式***********************************/


	.hide {
		display: none;
		// padding-bottom: 150rpx;
	}

	.show {
		display: block;
	}

	.active_list_nav_item {
		border-bottom: 6rpx #0191A0 solid;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #132B2E;
	}

	.active_classify_box_content_item {
		background: rgba(1, 145, 160, 0.9900) !important;
		color: #FFFFFF !important;
	}

	.content_open {
		border-radius: 20rpx;
		overflow: hidden;
		transition: all 0.5s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}

	.content_close {
		height: 0;
		opacity: 0;
		transition: all 0.5s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}
</style>
